<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="nav-header">
			<view class="nav-bar">
				<view class="nav-back" @tap="goBack">
					<uni-icons type="left" size="20" color="#333"></uni-icons>
					<text class="back-text">返回</text>
				</view>
				<text class="nav-title">修改密码</text>
				<view class="nav-right"></view>
			</view>
		</view>

		<view class="header">
			<text class="subtitle">请确保新密码的安全性</text>
		</view>

		<view class="form">
			<view class="form-item">
				<text class="label">当前密码</text>
				<input class="input" type="password" v-model="formData.oldPassword" placeholder="请输入当前密码" />
			</view>
			
			<view class="form-item">
				<text class="label">新密码</text>
				<input class="input" type="password" v-model="formData.newPassword" placeholder="请输入新密码" />
				<text class="hint">密码长度8-20位，包含字母和数字</text>
			</view>
			
			<view class="form-item">
				<text class="label">确认新密码</text>
				<input class="input" type="password" v-model="formData.confirmPassword" placeholder="请再次输入新密码" />
			</view>
		</view>

		<view class="actions">
			<uni-button type="primary" :loading="isSubmitting" @tap="submitChange">确认修改</uni-button>
		</view>

		<view class="tips">
			<text class="tips-title">密码安全提示：</text>
			<text class="tips-item">• 不要使用生日、手机号等简单密码</text>
			<text class="tips-item">• 建议使用字母、数字、符号组合</text>
			<text class="tips-item">• 定期更换密码提高账号安全性</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			formData: {
				oldPassword: '',
				newPassword: '',
				confirmPassword: ''
			},
			isSubmitting: false
		}
	},
	computed: {
		canSubmit() {
			return this.formData.oldPassword && 
				   this.formData.newPassword && 
				   this.formData.confirmPassword &&
				   this.formData.newPassword === this.formData.confirmPassword &&
				   this.formData.newPassword.length >= 8;
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},

		// 前端人员：修改密码
		// BACKEND REQUIRED
		// POST /api/account/change-password
		// body: { 
		//   oldPassword: string, 
		//   newPassword: string 
		// }
		// Response 200: { success: true, message: "密码修改成功" }
		// Response 400: { success: false, message: "当前密码错误" }
		// Response 400: { success: false, message: "新密码不符合要求" }
		submitChange() {
			if (!this.canSubmit) {
				uni.showToast({ title: '请完善信息', icon: 'none' });
				return;
			}

			if (this.formData.newPassword !== this.formData.confirmPassword) {
				uni.showToast({ title: '两次密码不一致', icon: 'none' });
				return;
			}

			if (this.formData.newPassword.length < 8) {
				uni.showToast({ title: '密码长度至少8位', icon: 'none' });
				return;
			}

			this.isSubmitting = true;
			uni.request({
				url: '/api/account/change-password',
				method: 'POST',
				data: {
					oldPassword: this.formData.oldPassword,
					newPassword: this.formData.newPassword
				},
				success: (res) => {
					if (res.data?.success) {
						uni.showToast({ title: '密码修改成功', icon: 'success' });
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						uni.showToast({ title: res.data?.message || '修改失败', icon: 'none' });
					}
				},
				fail: () => {
					uni.showToast({ title: '网络错误', icon: 'none' });
				},
				complete: () => {
					this.isSubmitting = false;
				}
			});
		}
	}
}
</script>

<style>
	.container { 
		padding: 0;
		background: #f5f5f5;
		min-height: 100vh;
	}

	/* 导航栏样式 */
	.nav-header {
		background: #ffffff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 88rpx;
		padding: 0 30rpx;
	}

	.nav-back {
		display: flex;
		align-items: center;
		gap: 8rpx;
		padding: 10rpx 16rpx;
		border-radius: 8rpx;
		transition: background-color 0.2s ease;
		cursor: pointer;
	}

	.nav-back:active {
		background-color: rgba(0, 0, 0, 0.05);
	}

	.back-text {
		font-size: 16px;
		color: #333;
		font-weight: 500;
	}

	.nav-title {
		font-size: 18px;
		font-weight: 600;
		color: #333;
	}

	.nav-right {
		width: 40rpx;
	}

	/* 页面内容样式 */
	.header { 
		margin-bottom: 40rpx; 
		padding: 30rpx 30rpx 0;
	}

	.title { font-size: 20px; font-weight: 700; color: #333; }
	.subtitle { font-size: 14px; color: #666; display: block; margin-top: 8rpx; }
	
	.form { 
		margin-bottom: 40rpx; 
		padding: 0 30rpx;
	}

	.form-item { margin-bottom: 30rpx; }
	.label { font-size: 16px; font-weight: 600; color: #333; display: block; margin-bottom: 12rpx; }
	.input { width: 100%; height: 88rpx; border: 1px solid #e0e0e0; border-radius: 10rpx; padding: 0 20rpx; background: #fafafa; font-size: 16px; box-sizing: border-box; }
	.hint { font-size: 12px; color: #999; display: block; margin-top: 8rpx; }
	
	.actions { 
		margin-bottom: 40rpx; 
		padding: 0 30rpx;
	}

	.actions uni-button {
		height: 88rpx;
		border-radius: 12rpx;
		font-size: 18px;
		font-weight: 600;
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		line-height: 1;
	}

	.tips { 
		background: #f8f9fa; 
		border-radius: 10rpx; 
		padding: 20rpx; 
		margin: 0 30rpx;
	}

	.tips-title { font-size: 14px; font-weight: 600; color: #333; display: block; margin-bottom: 12rpx; }
	.tips-item { font-size: 12px; color: #666; display: block; margin-bottom: 8rpx; }
</style>






